<template>
	<article  v-title="'您的信息'">
		<ul>
			<li><span>姓名：</span><input type="input" placeholder="请填写您的姓名        必填" v-model="$store.state.person.xm"></li>
			<li><span>电话：</span><input type="input" placeholder="请填写您的电话        必填" v-model="$store.state.person.sjh"></li>
			<li><span>区域：</span><input type="input" placeholder="请选择城市           	必填" v-model="$store.state.person.address" @focus="open"><i class="icon icon-xiala"></i></li>
			<li class="sex">
				<span>性别：</span>
				<div :class="{active: $store.state.person.sex == 1}" @click="switchSex(1)"><img :src="$store.state.person.sex == 1 ? require('../../assets/img/nan.png'):require('../../assets/img/nan1.png')" class="boy">男士</div>
				<div :class="{active: $store.state.person.sex == 0}" @click="switchSex(0)"><img :src="$store.state.person.sex == 0 ? require('../../assets/img/nv.png'):require('../../assets/img/nv1.png')" class="girl">女士</div>
			</li>
			<li><span>邮箱：</span><input type="input" placeholder="请填写您的邮箱" v-model="$store.state.person.email"></li>
			<li><span>微信：</span><input type="input" placeholder="请填写您的微信号" v-model="$store.state.person.wxzh"></li>
			<li><span>地址：</span><input type="input" placeholder="请填写您的详细地址" v-model="$store.state.person.xxdz"></li>
		</ul>
		<button class="upload" @click="submit">确认提交</button>

		<div class="mask" v-show="mask" @click="close"></div>
		<mt-picker :slots="slots" @change="onValuesChange" class="city" :style="{transform: 'translateY('+translateY+')'}"></mt-picker>

  		<!-- <mt-popup v-model="popupVisible" popup-transition="popup-fade" position="top" class="error">
  			<div class="error">asdsadasd</div>
  		</mt-popup> -->
	</article>
</template>

<script type="text/javascript">
	import {MessageBox} from 'mint-ui'
	export default {
		data () {
			return {
				// sexActive: 1,

				name: '',
				phone: '',
				email: '',
				sex: 1,
				city: '',
				weixin: '',
				popupVisible: true,

				translateY: '100%',
				mask: false,
				slots: [
			        {
			          	flex: 1,
			          	values: ["北京市", "广东省", "山东省", "江苏省", "河南省", "上海市", "河北省", "浙江省", "香港特别行政区", "陕西省", "湖南省", "重庆市", "福建省", "天津市", "云南省", "四川省", "广西壮族自治区", "安徽省", "海南省", "江西省", "湖北省", "山西省", "辽宁省", "台湾省", "黑龙江", "内蒙古自治区", "澳门特别行政区", "贵州省", "甘肃省", "青海省", "新疆维吾尔自治区", "西藏区", "吉林省", "宁夏回族自治区"],
			          	className: 'slot1',
			          	defaultIndex: 0,
			          	textAlign: 'right'
			        },
			        {
			          	divider: true,
			          	content: '-',
			          	className: 'slot2'
			        },
			        {
			          	flex: 1,
			          	values: [],
			          	defaultIndex: 0,
			          	className: 'slot3',
			          	textAlign: 'left'
			        }
			      ]
			}
		},
		created () {
			// this.name =
			// this.getname()
			this.getInfo();
			// console.log(this.person)
			this.$store.state.wrap = false;
			// console.log(this.$store.state.person);
		},
		watch: {
			// sexActive () {
			// 	console.log(222222+ "," +this.$store.state.person)
			// 	if (!this.$store.state.person.sex && this.$store.state.person.sex != 0) {
			// 		return 1;
			// 	}
			// 	return this.$store.state.person.sex == 0 ? 0:1
			// }
		},
		methods: {
			submit () {
				if (!this.$store.state.person.xm) {
					MessageBox('提示', '请输入您的姓名');
					return
				}else if(!this.sex && this.sex != 0) {
					MessageBox('提示', '请选择您的性别');
					return
				}else if(!this.$store.state.person.sjh) {
					MessageBox('提示', '请输入您正确的电话号码');
					return
				}else if(!this.$store.state.person.address) {
					MessageBox('提示', '请选择您的所在地');
					return
				}
				this.axios.get(this.$store.state.hostname + 'cw/updateyhinfo.do',{
					yhid: this.ls.getItem('userID'),
					// yhid: 36,
					xm: this.$store.state.person.xm,
					sex: this.sex,
					sjh: this.$store.state.person.sjh,
					email: this.$store.state.person.email,
					address: this.$store.state.person.address,
					wxzh: this.$store.state.person.wxzh,
					xxdz: this.$store.state.person.xxdz,
				}).then( res => {
					MessageBox('提示', '修改成功');
					this.$router.go(-1);
				})
			},
			getInfo () {
				this.http.get(this.$store.state.hostname + 'yh/getyhinfo.do',{
				    date: new Date()
				}).then( res => {
					this.$store.state.person = res.data.data;
				})
			},
			open () {
			 	document.activeElement.blur();//屏蔽默认键盘弹出；
				this.mask = true;
				this.translateY = 0;
			},
			close() {
				this.mask = false;
				this.translateY = '100%';
			},
			onValuesChange(picker, values) {
				picker.slots[2].values = this.$store.state.menu[values[0]];
				if (!values[0] || !values[1]) return

				this.$store.state.person.address = values[0] + '-' + values[1];
				console.log(this.city)
		    },
		    switchSex (index) {
		    	this.$store.state.person.sex = index;
		    	this.sex = index;
		    }
		}
	}
</script>

<style lang="less" scoped>
	article {

		input {
			outline:none;
			border:none;
		}
		ul {
			width:90%;
			margin:0 auto;

		}
		.sex {
			padding-left:0.2rem;
			color: #ccc;

			.active {
				color: #000;
			}

			>* {
				display: inline-block;
				vertical-align: middle;
			}
			div {
				margin:0 0.2rem;
				>* {
					vertical-align: middle;
				}
				img {
					margin-right:0.1rem;
				}
			}
			.boy {
				width: 0.35rem;
			}
			.girl {
				width: 0.3rem;
			}
		}
		li {
			width: 100%;
			margin:0.15rem 0;
			position: relative;

			input {
				width: 80%;
				height: 0.5rem;
				line-height: 0.4rem;
				background: #F2F2F2;
				text-indent: 1em;
    			border: 1px solid #ccc;
    			border-radius:0.05rem;
			}

			.icon {
				position: absolute;
				right:0.35rem;top:50%;
				color: #ccc;
				transform: translateY(-50%);
			}
		}

		button {
			display: block;
			width: 90%;
			margin:0.2rem auto;
			margin-bottom:0.1rem;
			font-size: 0.3rem;
			line-height: 0.5rem;
			background: #77BBCF;
			color:#fff;
			border:1px solid #eee;
			border-radius: 0.05rem;
		}
		.mask {
			position: fixed;
			top:0;left:0;
			width: 100%;height: 100%;
			background: rgba(0,0,0,.5);
		}
		.city {
			position: fixed;
			width: 100%;
			// background: #fff;
			 background: linear-gradient(#f4f8f6,#808080 ,#f4f8f6);
			bottom:0;
			// transform: translateY(100%);
			transition: all .3s;
			// .picker-items{
			// 	background: red;
			// 	.picker-center-highlight{
			// 		background: red;
			// 	}
			// }
		}

		// .error {
		// 	width: 100%;
		// 	background: transparent;
		// }
	}
</style>
